<template>
	<view class="container">
		<tui-list-cell :hover="false" :lineLeft="false">
			<view class="tui-cell-input">
				<input
					:value="info.nickname"
					placeholder="请输入昵称"
					placeholder-class="tui-phcolor"
					type="text"
					:auto-focus="true"
					:focus="true"
					maxlength="40"
					@input="inputNickname"
				/>
				<view class="tui-icon tui-icon-close_fill" v-show="info.nickname" @tap="clearInput"></view>
				<icon type="clear" :size="14" color="#bfbfbf" v-show="info.nickname" @tap="clearInput"></icon>
			</view>
		</tui-list-cell>
		<view class="tui-btn-box"><tui-button @tap="handleEdit" shadow height="88rpx" shape="circle" type="primary">确定</tui-button></view>
	</view>
</template>

<script>
import { updateInfo } from '@/service/mine.js';
export default {
	data() {
		return {
			info: { nickname: '', headUrl: '' }
		};
	},
	onLoad() {
		this.info = this.$store.state.userInfo;
	},
	methods: {
		async handleEdit() {
			if (!this.info.nickname) {
				return this.$msg('请输入昵称');
			}
			await updateInfo({ nickname: this.info.nickname, headUrl: this.info.headUrl }, { loading: true });
			this.$msg('修改成功');
			this.$store.commit('saveuserinfo', this.info);
			setTimeout(v => {
				uni.navigateBack();
			}, 1000);
		},
		inputNickname(e) {
			this.info.nickname = e.detail.value;
		},
		clearInput() {
			this.info.nickname = '';
		}
	}
};
</script>

<style lang="scss">
.container {
	padding-top: 20rpx;
	.tui-cell-input {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;

		input {
			flex: 1;
			padding-left: $uni-spacing-row-base;
		}
	}
	.tui-btn-box {
		padding: 40rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
	}
}
</style>
